<template>
  <div class="article_container">
    <van-nav-bar
      title="文章详情"
      left-arrow
      @click-left="$router.go(-1)"
      fixed
      placeholder
    />
    <h5>{{ articles.title }}</h5>
    <div class="author">
      <van-image
        width="50"
        height="50"
        fit="fill"
        round
        :src="articles.aut_photo"
      />
      <div class="text">
        <p>{{ articles.aut_name }}</p>
        <p>{{ articles.pubdate | showDate }}</p>
      </div>
      <van-button type="info" round @click="followClick">{{
        articles.is_followed ? "取消关注" : "+ 关注"
      }}</van-button>
    </div>
    <div class="article_content" v-html="articles.content"></div>
    <div class="btn">
      <van-button
        plain
        round
        hairline
        :icon="articles.attitude == 1 ? 'good-job' : 'good-job-o'"
        class="good"
        type="primary"
        @click="praiseClick"
        >{{ articles.attitude === 1 ? "取消点赞" : "点赞" }}</van-button
      >
      <van-button
        plain
        round
        hairline
        :icon="articles.attitude == 0 ? 'delete' : 'delete-o'"
        class="like"
        type="danger"
        @click="dislikeClick"
        >{{ articles.attitude === 0 ? "取消不喜欢" : "不喜欢" }}</van-button
      >
    </div>
  </div>
</template>

<script>
import {
  getArticleInfo,
  delFollowing,
  addFollowing,
  delPraise,
  addPraise,
  delDislike,
  addDislike
} from "./home";
export default {
  name: "myarticle",
  data() {
    return {
      articles: {}
    };
  },
  async created() {
    let res = await getArticleInfo(this.$route.query.id);
    console.log(res);
    this.articles = res.data.data;
  },
  methods: {
    async followClick() {
      if (this.articles.is_followed) {
        //   取消关注
        let res = await delFollowing(this.articles.aut_id);

        this.$toast.success("取消关注成功");
        this.articles.is_followed = false;
      } else {
        //   关注
        let res = await addFollowing({ target: this.articles.aut_id });

        this.$toast.success("关注成功");
        this.articles.is_followed = true;
      }
    },
    async praiseClick() {
      if (this.articles.attitude == 1) {
        //   取消点赞
        let res = await delPraise(this.$route.query.id);

        this.$toast.success("取消点赞成功");
        this.articles.attitude = -1;
      } else {
        //   点赞
        let res = await addPraise({ target: this.$route.query.id });

        this.$toast.success("点赞成功");
        this.articles.attitude = 1;
      }
    },
    async dislikeClick() {
      if (this.articles.attitude == 0) {
        //   取消点赞
        let res = await delDislike(this.$route.query.id);

        this.$toast.success("取消不被喜欢成功");
        this.articles.attitude = -1;
      } else {
        //   点赞
        let res = await addDislike({ target: this.$route.query.id });

        this.$toast.success("不喜欢成功");
        this.articles.attitude = 0;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.article_container {
  position: relative;
  padding-bottom: 20px;
  .van-nav-bar {
    .van-nav-bar__content {
      background-color: #fff;

      .van-nav-bar__title {
        color: #000;
      }
    }
  }
  h5 {
    padding-left: 15px;
    font-size: 16px;
    line-height: 20px;
  }

  .author {
    padding-left: 15px;
    display: flex;
    align-items: center;

    .text {
      p {
        margin-left: 10px;
        font-size: 12px;
      }
    }

    .van-button {
      position: absolute;
      right: 15px;
    }
  }
  .article_content {
    padding-left: 20px;
    margin-top: 10px;
    font-size: 16px;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .btn {
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .good {
      margin-left: 10%;
    }
    .like {
      margin-right: 10%;
    }
  }
}
</style>
